<template>
  <div class="tpl47-head">
    <div class="headerNav64">
      <div class="header_title mobSearch64 clearfix">
        <a @click="JumpName('item-class-list')" class="ico_right fl"><i></i></a>
        <div class="search_form">
          <div class="formitem">
            <button class="j-search-button" @click="searchList"></button>
            <!-- TODO 小程序input处理 -->
            <input type="text" name="title" placeholder="商品搜索：请输入商品关键字" v-model="keyword" @confirm="searchList" />
          </div>
        </div>
        <a href="javascript:;" @click="cityDialogVisible = true" class="ico_left fl"><span>{{ curCity }}</span><i></i></a>
      </div>
      <section v-if="tplItemData.dataset" class="nav-classify mobNav64 clearfix">
        <div class="mobNavBox">
          <ul>
            <li v-for="(item,index) in tplItemData.dataset" :key="index"><a @click="openLink(item.link)"><span>{{ item.showtitle }}</span></a></li>
          </ul>
        </div>
      </section>
      <div class="header_img">
        <img :src="tplItemData.headerpic" alt="">
      </div>
      <a-map ref="aMaps" @getLoaction="getLoactionFn" />
      <location-city ref="locationCity" @change="cityChangeFn" @refresh="refreshLocation" :visible.sync="cityDialogVisible"></location-city>
    </div>
    
  </div>
</template>

<script>
  import Vue from 'vue'
  import { openPage } from '@/utils/utils'
  import aMap from '@/views/shop/storeList/components/amap'
  import locationCity from '@/components/locationCity'
  export default Vue.extend({
    name: 'index',
    props: {
      tplItemData: {
        type: Object
      }
    },
    data() {
      return {
        curCity: '请选择',
        cityDialogVisible: false,
        shopName: '',
        keyword: ''
      }
    },
    components: {
      aMap,
      locationCity
    },
    methods: {
      // TODO 刷新定位
      refreshLocation() {
        this.$refs.aMaps.getCurrentPost()
      },
      openLink(link) {
        openPage(link)
      },
      /**
       * 搜索商品
       */
      searchList() {
        this.$JumpName(this, 'item-list', { title: this.keyword })
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      },
      /**
       * 地图获取定位
       */
      getLoactionFn(val) {
          this.curCity = val.address_component.district
        this.cityDialogVisible = false
        this.$refs.locationCity.curCity = this.curCity
        this.$emit('getLoaction', { lat: val.location.lat, lng: val.location.lng })
      },
      /**
       * 选择了城市之后抛出的城市id
       */
      cityChangeFn(val) {
        this.curCity = val.cityName
        this.$emit('change', val)
      }
    }
  })
</script>

<style lang="scss">
  .tpl47-head{
    .headerNav64{
      width: 100%;
      height: 100%;
      background:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl47/64headerNav.png) no-repeat center;
      background-size: cover;
      margin-bottom: 20px;
      .header_img{
        border-radius: 10px;
        overflow: hidden;
        margin: 0 3%;
        img{
          display:block;
          width:100%;
        }
      }
    }
    .mob64{
      margin-top: 170px;
    }
    .members_search{
      width: 100%;
      border: none;
      border-bottom: #dbdada solid 2px !important;
      border-radius: 0px;
    }
  
    /* 头部搜索框 */
    .header_title{
      width:100%;
      height:64px;
      background-repeat:no-repeat;
      background-position:center center;
      background-size:20%;
      text-align:center;
      padding:16px 0 0;
      &>a{
        display: inline-block;
        text-align: center;
        color: #fff;
        // padding:0 4px;
        position: relative;
        i{
          display: inline-block;
          background-repeat:no-repeat;
          background-position:center;
          background-size:contain;
          margin:0 auto;
        }
        span{
          display: inline-block;
          font-size: 20px;
          margin-top: 6px;
        }
        &.ico_right{
          padding-left: 3%;
          margin-right: 5%;
          i{
            height: 32px;
            width:32px;
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl47/64menu.png);
            margin-top: 18px;
          }
        }
        &.ico_left{
          i{
            width: 16px;
            height:10px;
            background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl47/64down.png);
            position: absolute;
            top: 50%;
            right: 14px;
          }
          font-size: 26px;
          width: 16%;
          // padding-left: 8px;
          display: flex;
          display: -webkit-box;
          display: -webkit-flex;
          align-items: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          height: 60px;
          line-height: 60px;
          margin-left: 3%;
        }
      }
      .search_form{
        display: inline-block;
        background-color: rgba(245, 245, 245, 0.26);
        border-radius: 6px;
        color: #fff;
        vertical-align: top;
        padding: 6px 0;
        width: 68%;
        float: left;
        .formitem {
          display: flex;
          align-items: center;
          padding: 0 20px;
        }
        button{
          width: 30px;
          height: 30px;
          border:none;
          background:none;
          background-image:url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl47/64search.png);
          background-repeat:no-repeat;
          background-position:center center;
          background-size:100%;
        }
        input{
          width: 80%;
          height: 48px;
          line-height: 48px;
          text-indent: 8px;
          border:none;
          background:none;
          color:#fff;
          margin-left: 8px;
        }
      }
    }
  
    /* 滑动导航条 */
    .nav-classify{
      width: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
      // background: #fff;
      margin-bottom: 30px;
      height: 60px;
      line-height: 60px;
      .mobNavBox{
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling:touch;
        // padding-bottom: 20px;
        ul{
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          li{
            display: inline-block;
            margin-right: 10px;
            //border:1px solid #eee;
            text-align: center;
            min-width: 140px;
            font-size: 26px;
            a{
              display: block;
              color:#fff;
              overflow: hidden;
              span{
                padding:10px 0;
                display: inline-block;
                white-space: nowrap;
                max-width: 130px;
                overflow: hidden;
              }
            }
          
          }
          li.cur{
            span{
              font-size: 32px;
            }
          }
        }
      }
    
    }
  }
</style>
